<template>
    <div class="dependency-container">
        <h1>生产依赖库</h1>
        <el-table :data="dependencies" height="250" style="width: 100%" stripe>
            <el-table-column prop="name" label="库名称" align="center" />
            <el-table-column prop="version" label="版本" align="center" />
        </el-table>
        <h1>开发依赖库</h1>
        <el-table :data="devDependencies" height="250" style="width: 100%" stripe>
            <el-table-column prop="name" label="库名称" align="center" />
            <el-table-column prop="version" label="版本" align="center" />
        </el-table>
    </div>
</template>

<script setup>
import { ref, onMounted, onActivated, nextTick } from 'vue'

const dependencies = ref([])
const devDependencies = ref([])

// 提取加载依赖信息的函数
async function fetchDependencies() {
    try {
        const response = await fetch('/dependencies.json')
        const data = await response.json()
        dependencies.value = Object.keys(data.dependencies).map((name) => ({
            name,
            version: data.dependencies[name]
        }))
        devDependencies.value = Object.keys(data.devDependencies).map((name) => ({
            name,
            version: data.devDependencies[name]
        }))
    } catch (error) {
        console.error('Error fetching dependencies', error)
    }
}

// 在组件挂载后调用后台接口
onMounted(() => {
    fetchDependencies()
})

// 在组件被激活时执行的操作
onActivated(() => {
    nextTick(() => {
        fetchDependencies()
    })
})
</script>

<style lang="scss" scoped>
.dependency-container {
    margin: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;

    h1,
    h2 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #333;
    }
}
</style>
